<template>
  <div>
    <el-upload :limit="limit" :http-request="upload" :file-list="fileList" action="#" list-type="picture-card"
      :accept="accept" :before-remove="handleRemove" :on-preview="handlePictureCardPreview"
      :before-upload="beforeAvatarUpload" :class="{hide:hideUploadEdit}">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>

</template>
<script>
  import { uploadPost } from "../apis/request.js"
  export default {
    props: {
      limit: Number,
      imgUrl: {
        type: String,
        default() {
          return ''
        }
      },
      accept: {
        type: String,
        default() {
          return 'image/*'
        }
      }
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: [],
        imgList: [],
        picList: []
      };
    },
    computed: {
      hideUploadEdit() {
        return this.imgList.length >= this.limit
      }
    },
    watch: {
      imgUrl() {
   
       this.getImgs()
      }
    },
    mounted() {
    
  this.getImgs()

    },


    methods: {
      // 获取图片列表
      getImgs(){
        this.picList=[]
        this.fileList=[]
        let urlStr = this.imgUrl.split(","); //logo地址
        urlStr.forEach(item => {
          if(item!==""){
            let obj = new Object();
          obj.url = item;
          this.picList.push(item)
          this.fileList.push(obj);
          }
        
        });
        this.imgList = this.fileList
      },
      //上传图片
      upload(content) {
        let file = content.file;
        let uid = content.file.uid;
        let formdata = new FormData();
        formdata.append("myfile", file);
        uploadPost("/upload/pictureOrVideo", formdata).then((res) => {
          if (res.code == 200) {
            let obj = new Object();
            obj.url = res.data;
            // this.fileList.push(obj);
            this.imgList.push({ url: res.data, uid: file.uid })
            this.picList.push(res.data)
            this.$emit('uploadImg', this.picList)
          }
        });
      },
      //预览图片
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      //判断图片大小
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt30M = file.size / 1024 / 1024 < 30;
        if (!isLt30M) {
          this.$message.error('上传头像图片大小不能超过 30MB!');
        }
        return isLt30M;
      },
      //删除图片
      handleRemove(file, fileList) {
        console.log(file, fileList)
        console.log(this.imgList)
        for (let i in this.imgList) {
          if (this.imgList[i].uid == file.uid) {
            this.imgList.splice(i, 1)
            this.picList.splice(i, 1)
            this.$emit('uploadImg', this.picList)

          }
        }
      }
    }
  }
</script>
<style>
  .hide .el-upload--picture-card {
    display: none;
  }
</style>